<!DOCTYPE html>
<html lang="en">
<head>
  <title>colResizable &#8211; range slider demo</title>  
  <link rel="stylesheet" type="text/css" href="css/main.css" />  
  <script  src="js/jquery.js"></script>
  <script  src="../../colResizable-1.6.js"></script>
  <script type="text/javascript">
	$(function(){	

		//callback function
		var onSlide = function(e){
			var columns = $(e.currentTarget).find("td");
			var ranges = [], total = 0, i, s ="Ranges: ", w;
			for(i = 0; i<columns.length; i++){
				w = columns.eq(i).width()-10 - (i==0?1:0);
				ranges.push(w);
				total+=w;
			}		 
			for(i=0; i<columns.length; i++){			
				ranges[i] = 100*ranges[i]/total;
				carriage = ranges[i]-w
				s+=" "+ Math.round(ranges[i]) + "%,";			
			}		
			s=s.slice(0,-1);			
			$("#text").html(s);
		}
		
		//colResize the table
		$("#range").colResizable({
			liveDrag:true, 
			draggingClass:"rangeDrag", 
			gripInnerHtml:"<div class='rangeGrip'></div>", 
			onResize:onSlide,
			minWidth:8
			});
	
	});	
  </script>
  
</head>
<body>
	<div class="center">
		<br/><br/>
		
		<div id="slider">
			<table id="range" width="100%" cellspacing="0" cellpadding="0">
				<tr>
					<td width="25%"></td>
					<td width="25%"></td>
					<td width="25%"></td>
					<td width="25%"></td>
				</tr>
			</table>	
		</div>
		
		<p id="text">Ranges: 25%, 25%, 25%, 25%</p>
		
		<br/><br/>

	</div>	
		

	
		
 </body>
 </html>
